<template>
	<view>
		<view class="card-content">
			<view class="card-head">{{$t('operate.accountsReceivable')}}</view> <!--收款账户-->
			<view class="card-body">
				<view class="body-list">
					<view class="list-name">{{$t('operate.accountsReceivable')}}</view> <!--收款账户-->
					<view class="list-value"><input maxlength="70" v-model="userInfo.appletBankName" @input='check_input' /></view>
				</view>
				<view class="body-list">
					<view class="list-name">{{$t('operate.receivingAccount')}}</view> <!--收款账号-->
					<view class="list-value"><input maxlength="30" v-model="userInfo.appletBankNo" @input='check_input' /></view>
				</view>
				<view class="body-list">
					<view class="list-name">{{$t('operate.receivingBank')}}</view> <!--收款开户行-->
					<view class="list-value"><input maxlength="70" v-model="userInfo.appletCreateBank" @input='check_input' /></view>
				</view>
			</view>
		</view>
		<view class="tips">
			{{$t('operate.appletCollectionInformationTips')}}
		</view>
		
		<view class="bottomBox" :style="{paddingBottom: `${bottomLift}px`}">
			<view class="button">
				<view class="add-button" @click="addClick">{{$t('publicLang.save')}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	import {
		saveAppletAccount,
		getAppletAccount
	} from '@/api/api.js';
	export default {
		data() {
			return {
				userInfo:{},
				bottomLift: app.globalData.bottomLift,
			}
		},
		onLoad() {
			this.getChannelMerImageInfo()
			let getUserConfirmState = uni.getStorageSync('getUserConfirmState')
			if(!getUserConfirmState){
				uni.showModal({
					title: this.$t('publicLang.hint'),
					content: this.$t('operate.modelTips'),
					cancelText:this.$t('operate.return'),
					confirmText:this.$t('operate.agree'),
					success: function (res) {
						if (res.confirm) {
							uni.setStorageSync('getUserConfirmState',true)
						} else if (res.cancel) {
							uni.navigateBack()
						}
					}
				});
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('navigation.appletCollectionInformation')
			});
		},
		methods: {
			getChannelMerImageInfo() {
				let _this = this
				getAppletAccount().then(res => {
					_this.userInfo = res.data
				})
			},
			addClick() {
				let _this = this
				saveAppletAccount(this.userInfo).then((res) => {
					_this.$util.Tips({
						title: _this.$t('publicLang.successfulOperation')
					});
					_this.getChannelMerImageInfo()
				}).catch(e=>{
					uni.showToast({
						title:e,
						icon:"none"
					})
				})
			},
			// 校验输入框
			check_input(e) {
				// console.info(e.currentTarget.dataset.eventOpts[0][1][0][1][1])
				let name = e.currentTarget.dataset.eventOpts[0][1][0][1][1]
				let value = e.detail.value
				var regRule =
					/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;;
				if (regRule.test(value)) {
					e.detail.value = value.replace(regRule, '')
					this.$nextTick(() => {
						this.userInfo[name] = e.detail.value
						this.$util.Tips({
							title: this.$t("goods.notUseEmoji") // 请勿使用表情符号
						});
					})
				}
				var regStr2 = /[`~!@#$%^&*()+=|{}\[\]<>/~]/;
				if (regStr2.test(value)) {
					e.detail.value = value.replace(regStr2, '')
					this.$nextTick(() => {
						this.userInfo[name] = e.detail.value
						this.$util.Tips({
							title: this.$t("goods.specialCharactersCannotBeEntered") // 不能输入特殊字符
						});
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.card-content {
		background-color: #FFFFFF;
		margin-bottom: 13rpx;

		.card-head {
			font-size: 32rpx;
			font-weight: bold;
			padding: 30rpx 40rpx;
			border-bottom: 1rpx solid #F5F5F8;
		}

		.body-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			padding: 34rpx 40rpx;
			.list-name {
				flex-shrink: 0;
				width: 140rpx;
				color: #666666;
			}

			.list-value {
				width: 100%;
				margin-left: 20rpx;
				font-weight: bold;
				text-align: right;
			}
		}
	}
	.tips {
		color: #BBBBBB;
		font-size: 20rpx;
		margin: 45rpx 40rpx;
	}
	.bottomBox {
		background-color: #FFFFFF;
		width: 100%;
		position: fixed;
		bottom: 0;
	}
	
	.button {
		width: 100%;
		height: 128rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.add-button {
		width: 690rpx;
		height: 92rpx;
		background-color: #111111;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		line-height: 92rpx;
	}
</style>
